<!-- 
@author : mill
@create date : 📅

-->
<template lang="jade">
.hello
  h1 你的IP: {{ msg | doage }}
  |     
  h2 The {{ count }}
  |     
  ul
    li
      a(href='javascript:void(0);',@click='increment')
        | {{ incre }}
    |       
    li
      a(href='https://forum.vuejs.org', target='_blank')
        | Forum
    |       
    li
      a(href='https://chat.vuejs.org', target='_blank')
        | Community Chat
    |       
    li
      a(href='https://twitter.com/vuejs', target='_blank')
        | Twitter
    |       
    br
    |       
    li
      a(href='http://vuejs-templates.github.io/webpack/', target='_blank')
        | Docs for This Template 📅
  |     
  h2 Ecosystem
  |     
  ul
    li
      a(href='http://router.vuejs.org/', target='_blank')
        | vue-router
    |       
    li
      a(href='http://vuex.vuejs.org/', target='_blank')
        | vuex
    |       
    li
      a(href='http://vue-loader.vuejs.org/', target='_blank')
        | vue-loader
    |       
    li
      a(href='https://github.com/vuejs/awesome-vue', target='_blank')
        | {{ largeOne }}
  ButtonCounter hello
  EchartsBar(:options='lineConfig',eid="aaa")
</template>

<script>
import main_conf from 'C@/main.yaml'
import LineDefaultConfig from 'C@/LineDefault.yaml'
import { mapState,mapGetters,mapActions } from 'vuex'
import ButtonCounter from '@/components/ButtonCounter'
import EchartsBar from '@/components/EchartsBar'
import {HELLO} from 'Stores/NAMESPACES'

export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: main_conf.banner,
      lineConfig: LineDefaultConfig,
    }
  },
  components: {ButtonCounter,EchartsBar}
  ,
  created: function () {
    post("http://httpbin.org/post",{name:"章三"})
    .then(res=>{
      this.msg=JSON.parse(res).origin;
    });
  },
  computed: Object.assign(
    mapState(HELLO,['count','incre']),
    mapGetters(HELLO,{
      largeOne: 'largeOne'
    })
  ),
  methods: mapActions(HELLO,['increment'])
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style  lang="less" scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: @imptant_font_color ;
}
</style>
